<template>
  <div class="citylist">
      <dl  v-for="item in citylist" :key="item.prefix" :class="{hotcity:item.prefix==='hotCities'}">
        <dt>
           {{item.prefix==='hotCities'?'热门城市':item.prefix.toUpperCase()}}
        </dt>
        <dd  v-for="it in item.cities" :key="it.cityid" @click="gohome(it)">
           {{it.name}}
        </dd>
     </dl>
</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: mapState({ citylist: state => state.city.citylist }),
  methods: {
    ...mapActions(["citylistAsc"]),
    ...mapMutations(["city"]),
    gohome(value) {
      this.city({ name: value.name, cityId: value.cityId });
      this.$router.go(-1);
    }
  },
  created() {
    this.citylistAsc();
  }
};
</script>

<style lang="less" scoped>
.citylist {
  text-align: left;
  font-size: 14px;
  color: #333;
  .hotcity {
    dd {
      display: inline-block;
      margin: 10px;
      padding: 0 10px;
      background-color: #fff;
    }
  }
  dt {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    background-color: #eee;
    padding-left: 15px;
    font-weight: 700;
  }
  dd {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #eee;
    margin: 0 10px;
  }
}
</style>
